<script setup lang="ts">
import { onMounted, ref } from 'vue';
import RotateDrawingBoard from '@/components/RotateDrawingBoard/index.vue'
const globalVal = globalThis as any
const inElectron = ref(!!globalVal.electron)

defineOptions({
  name: 'Index'
})


let drawingBoard = ref<any>(null);

/**
 * 开启
 */
function start():void{
  drawingBoard.value.start()
}

/**
 * 停止
 */
function stop():void{
  drawingBoard.value.stop()
}

/**
 * 加速
 */
function speedUp():void{
  drawingBoard.value.speedUp()
}

/**
 * 减速
 */
function slowDown():void{
  drawingBoard.value.slowDown()
}

/**
 * 退出
 */
function exit():void{
  globalVal.showConfirm({
    title: '确认关闭应用吗?',
    confirm: () => {
      globalVal.electronApi.closeWindow()
    }
  })
}
/**
 * 最小化
 */
function minus():void{
  globalVal.electronApi.minimizeWindow()
}

onMounted(() => {

})

</script>

<template>
  <div class="app-container">
    <div class="van-nav-bar van-hairline--bottom">
        <div class="van-nav-bar__content">

          <div class="van-nav-bar__title van-ellipsis iconfont icon-scanner"> 旋转画板</div>
          <div class="van-nav-bar__right"  v-if="inElectron">
            <van-button class="btn-minus" icon="minus" @click="minus" plain></van-button>
            <van-button class="btn-cross" icon="cross" @click="exit" plain ></van-button>
          </div>
        </div>
      </div>

      <div class="main-body">

          <div class="rotate-canvas">
            <rotate-drawing-board ref="drawingBoard" />
          </div>




      </div>
      <div class="control footer">
        <van-button type="primary" class="btn btn-start" @click="start">启动</van-button>
        <van-button type="success" class="btn btn-speed-up" @click="speedUp">加速</van-button>
        <van-button type="danger" class="btn btn-slow-down" @click="slowDown">减速</van-button>
        <van-button type="warning" class="btn btn-stop" @click="stop">停止</van-button>
      </div>

  </div>




</template>

<style scoped lang="scss">
.app-container{
  display: flex;
  flex-direction: column;
  height: 100%;


}
.main-body{
  flex:1;
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
  padding:0.1rem 0rem;
  background-color: #F7F7F7;
  display: flex;
  justify-content: center;
  align-items: center;

}



.btn-minus, .btn-cross{
  margin-left: 1rem;
  font-size: 1rem;
  border: none;
  width: 1rem;
}

</style>
